<!-- Email 输入组件 -->
<script lang="ts" setup>
import { isPhone } from '/@/utils/';

// import InputBase from './InputBase.vue';
import { ListenerProp } from '@varlet/ui';
import { i18nTranslate } from '/@/i18n';
import { ref } from 'vue';
import { onlyNumberAllowed, replaceChinese, replaceEmoji, replaceSpace } from '/@/utils/format';

// 定义 props
defineProps<{
    modelValue?: string;
    autofocus?: boolean;
    clearable?: boolean;
    // 地区码
    areacode?: string;
    onChange?: ListenerProp<(value: string) => void>;
}>();

// 定义外部事件
const emit = defineEmits(['update:modelValue', 'change']);

const inputRef = ref()

// 内部事件

// 内部事件
const onClear = () => emit('update:modelValue', '');
const onInput = (value: string) => {
    // 只允许数字
    let _value = onlyNumberAllowed(value);
    // 直接操作 input 来修改
    inputRef.value.inputEle.el.value = _value;
    emit('update:modelValue', _value);
};
const onChangeCode = (code: string) => {
    emit('change', code);
};

// const { t } = useI18n();

// 校验规则，返回true表示通过校验
// const rules = [
//     (v: string) => !!v || t('form_phone_empty'),
//     (v: string) => isPhone(v) || t('form_phone_not_correct'),
// ];
</script>
<template>
    <InputBase ref="inputRef"  maxlength="20" type="text" :model-value="modelValue"
      :autofocus="autofocus" @clear="onClear" :clearable="clearable" @input="onInput">
        <template #prepend>
          <div>
              <AreaCodePicker :model-value="areacode" @change="onChangeCode"></AreaCodePicker>
            </div> 
          </template>
    </InputBase>
</template>
<style lang="scss" scoped>
    .icon_box {
      width: 36px;
      height: 36px;
      margin-right: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
</style>
